<!DOCTYPE html>
<html lang="en">
    <head>
	    <meta charset="utf-8">
	    <title>传智播客·黑马程序员</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	    <meta name="apple-mobile-web-app-capable" content="no">
	    <meta name="apple-mobile-web-app-status-bar-style" content="pink">

	     <link rel="stylesheet" href="../css/base.css">
	     <link rel="stylesheet" href="../css/conment.css">
		 <link rel="stylesheet" href="../fonts/iconfont.css">
		 <link rel="stylesheet" href="../css/shoppingcar.css">
	</head>
    <body>
		<div class="header">
			<h1 class="mui-title">传智播客.黑马程序员Vue.js</h1>
		</div>
		<div class="content">
			<ul class="shoppingcar">
				<div class="car_goods">
					<div class="checked">
						<span class="iconfont"></span>
					</div>
					<div class="checkedgoods clearfix pr">
						<h4>中国移动Apple旗舰店</h4>
						<img src="../picture/iphonex1.png" alt="">

						<p class="words">Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机</p>
						<strong>&yen;6999</strong>

						<div class="add pa">
							<input type="button" value="-" class="decgoods">
							<input type="tel" value="1" class="goodscount">
							<input type="button" value="+" class="addgoods">			
						</div>
					</div>
				</div>
				<div class="car_goods">
					<div class="checked">
						<span class="iconfont"></span>
					</div>
					<div class="checkedgoods clearfix pr">
						<h4>中国移动Apple旗舰店</h4>
						<img src="../picture/iphonex1.png" alt="">

						<p class="words">Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机</p>
						<strong>&yen;6999</strong>

						<div class="add pa">
							<input type="button" value="-" class="decgoods">
							<input type="tel" value="1" class="goodscount">
							<input type="button" value="+" class="addgoods">			
						</div>
					</div>
				</div>
				<div class="car_goods">
					<div class="checked">
						<span class="iconfont"></span>
					</div>
					<div class="checkedgoods clearfix pr">
						<h4>中国移动Apple旗舰店</h4>
						<img src="../picture/iphonex1.png" alt="">

						<p class="words">Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机</p>
						<strong>&yen;6999</strong>

						<div class="add pa">
							<input type="button" value="-" class="decgoods">
							<input type="tel" value="1" class="goodscount">
							<input type="button" value="+" class="addgoods">			
						</div>
					</div>
				</div>
				<div class="car_goods">
					<div class="checked">
						<span class="iconfont"></span>
					</div>
					<div class="checkedgoods clearfix pr">
						<h4>中国移动Apple旗舰店</h4>
						<img src="../picture/iphonex1.png" alt="">

						<p class="words">Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机Apple iPhone X (A1865) 256GB 深空灰色 移动联通电信4G手机</p>
						<strong>&yen;6999</strong>

						<div class="add pa">
							<input type="button" value="-" class="decgoods">
							<input type="tel" value="1" class="goodscount">
							<input type="button" value="+" class="addgoods">			
						</div>
					</div>
				</div>
			</ul>
			<div class="allprice">
				<span class="checkall iconfont"></span>
				<span>全选</span>
				<div class="pay" onclick="alert('功能尚未完善')">结算(<i>0</i>)</div>
				<strong class="hesuan">&yen;6999</strong>
				<i>合计：</i>
			</div>
		</div>
		<!-- 底部导航部分 -->
		<div class="nav">
			<a href="../index.html" class=""><span class="iconfont">&#xe61c;</span><p class="">首页</p></a>
			<a href="goods.html" class=""><span class="iconfont">&#xe61d;</span><p class="">商品</p></a>
			<a href="shoppingcar.html" class="blue"><span class="iconfont">&#xe65c;</span><p class="">购物车</p></a>
			<a href="mycenter.html"><span class="iconfont">&#xe614;</span><p class="">个人中心</p></a>
		</div>
		<!-- 底部导航部分 -->
    </body>
</html>
<script type="text/javascript">
	var decgoods = document.getElementsByClassName("decgoods");
    var addgoods = document.getElementsByClassName("addgoods");


    // 点击减号时
	for (var i = 0; i < decgoods.length; i++) {
		decgoods[i].onclick=function(){
			// 当点击当前盒子数量减号时，先找到他的父盒子。再去找value值
			if(this.parentNode.children[1].value>1){
				this.parentNode.children[1].value--; 
			}
	    }
	};
	// 点击加号时
	for (var i = 0; i < addgoods.length; i++) {
		addgoods[i].onclick=function(){
			// 当点击当前盒子数量减号时，先找到他的父盒子。再去找value值
			this.parentNode.children[1].value++; 
	    }
	};


	// 点击勾选圆圈
    var checked= document.getElementsByClassName("checked");//获取每个checkd类名里的圆点;
    for (var i = 0; i < checked.length; i++) {
    	var flag = true;//假设法，假设一个变量为true；
    	checked[i].onclick=function(){
    		if(flag){
    			this.children[0].style.backgroundColor = "#26A2FF";
    			this.children[0].innerHTML = "&#xe630;"; //勾的html编码
    			flag=false;
    		}else{
    			this.children[0].style.backgroundColor = "#fff";
    			this.children[0].innerHTML = "";
    			flag=true;
    		}
    	}

    };


    //点击全选
    var checkall = document.getElementsByClassName("checkall")[0];
    var hesuan = document.getElementsByClassName("hesuan")[0];
    var flag2 = true;
    checkall.onclick=function () {
    		if(flag2){
    			// 全选按钮勾选上
    			this.style.backgroundColor = "#26A2FF";
    			this.innerHTML = "&#xe630;"; //勾的html编码
    			flag2=false;
    			//小按钮勾选上
    			for (var i = 0; i < checked.length; i++) {
    				
    				checked[i].children[0].style.backgroundColor = "#26A2FF";
    				checked[i].children[0].innerHTML = "&#xe630;"; 
    			};
    		}else{
    			this.style.backgroundColor = "#fff";
    			this.innerHTML = "";
    			flag2=true;
    			//小按钮取消勾选上
    			for (var i = 0; i < checked.length; i++) {
	    			checked[i].children[0].style.backgroundColor = "#fff";
	    			checked[i].children[0].innerHTML = ""; 
    			};
    		}
    }
</script>
